<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
    <Card>  
        <p slot="title">
            <Icon type="navicon-round"></Icon>
            分类管理
        </p>
        <row>
            <i-col span="6">
               <Button-group>
        <Button @click="addcategory(0)">添加</Button>
        <Button @click="saveordnum">保存排序</Button>
        <Button @click="delduo">批量删除</Button>
    </Button-group>
       </i-col>
            <i-col span="11">
                &nbsp;
            </i-col>      
            <i-col span="7">
                &nbsp;
            </i-col>
        </row>
    <div style="margin-top:10px"></div>
    <i-table :columns="cols" :data="data" stripe="stripe" @on-selection-change="setselect"></i-table>
    </Card>
</template>

<script>
import api from '../../libs/api';
export default {
    name: 'content_category',
    data () {
        return {
            cols:[
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: 'ID',
                        width:60
                    },
                    {
                        title: '预览',
                        key: 'preurl',
                        width:68,
                        align:'center',
                        render:(h,params)=>{
                            return h('a',{
                                attrs:{href:'/list/'+params.row.ID,target:'_blank'},
                            },'(预览)')
                        }
                    },
                    {
                        title: '分类名称',
                        key: 'title',
                        align:'left',
                    render:(h,params)=>{
                        return h('Button',
                                    {
                                        props: {
                                            type: 'text',//无边框，像文字格式
                                            size: 'small',
                                        },
                                        on: {
                                            click:  () => {         
                                                    this.addcategory(params.row.ID); 
                                        }
                                        }
                                    },
                                    params.row.title)
                    }
                    },
                    {
                        title: '排序',
                        key: 'ordnum',
                        align:'center',
                        width:80,
                        render:(h,params)=>{
                            return h('Input',{
                                props:{
                                    value:params.row.ordnum
                                },
                                on:{
                                    'on-blur':(event) => {
                                        this.data[params.index].ordnum = event.target.value;
                                    }
                                },
                            })
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width:'120px',
                        render: (h, params) => {
                            return h('div',
                                [
                                    h('Button',
                                        {
                                            props: {
                                                //type: 'text',//无边框，像文字格式
                                                size: 'small',
                                            },
                                            on: {
                                                click: () => {        
                                                    this.addcategory(params.row.ID); 
                                                }
                                            }
                                        },
                                        '编辑'),
                                        h('span',' '),
                                    h('Button',
                                        {
                                            props: {
                                                //type: 'text',//无边框，像文字格式
                                                size: 'small',
                                            },
                                            on: {
                                                click: () => {
                                                    this.delcategory(params.index);
                                                }
                                            }
                                        },
                                        '删除')
                                ])
                        }
                    }],
            categorylist:[],
            data:[],
            editData:{},
            selectdata:[]
        };
    },
    methods:{
        addcategory(id){                                                     
            let query = {ID:id};
            this.$router.push({
                name: 'content_categoryadd',
                query: query
            });
        },
        delcategory(index){
            var vm=this;            
            api.post("/category/del?id="+vm.data[index].ID).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success(res.data.msg);
                }
                else{
                    vm.$Message.error(res.data.msg);
                }
                vm.init();
            })
        },setselect(selection){
            this.selectdata=selection;
        },
        saveordnum(){
            var vm=this;
            if(this.data.length>0){
                api.post("/category/saveordnum",this.data).then(function(res){
                    if(res.data.code==200){
                        vm.$Message.success("排序完成！");
                    }
                    else{
                        vm.$Message.error("排序失败！");
                    }
                    vm.init();
                })
            }
            else{
                vm.init();
            }
        },
        delduo(){
            var vm=this; 
            console.log(this.selectdata);
            api.post("/category/delall",{data:this.selectdata}).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success("删除成功！");
                }
                vm.init();
            })
        },
        init(){
            var vm=this;
            vm.data=[];
            api.get("/category/gettree").then(function(res){
                var clist=res.data.msg;
                for(var item in clist){
                    vm.data.push(clist[item]);
                    if(clist[item].children.length>0){
                        var cchild=clist[item].children;
                        for(var citem in cchild){
                            cchild[citem].title="　|-"+cchild[citem].title;
                            vm.data.push(cchild[citem]);
                            if(cchild[citem].children.length>0){
                                var c2child=cchild[citem].children;                                
                                for(var c2item in c2child){
                                    c2child[c2item].title="　　|-"+c2child[c2item].title;
                                    vm.data.push(c2child[c2item]);
                                }
                            }
                        }
                    }
                }
            })
        }
    },
    created(){
        this.init();
    }
};
</script>
